<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue.js"></script>
</head>
<body>
详见官方文档：
<a href="https://cn.vuejs.org/v2/guide/instance.html#%E5%AE%9E%E4%BE%8B%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90">
    https://cn.vuejs.org/v2/guide/instance.html#%E5%AE%9E%E4%BE%8B%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90
</a>
<div id="app">
    <h3 id="h3">{{name}}</h3>
    <input type="button" value="修改" @click="name='哈哈哈'">
</div>

</body>
<script>
    new Vue({
        el:"#app",
        data:{
            name:"hello，vue"
        },
        /**
         * 1.第一个生命周期函数
         * 在该生命周期函数执行的时候，data和methods的数据都没有初始化
         */
        beforeCreate(){
            console.log(this.name)  //undefined
        },
        /**
         * 2.第一个生命周期函数
         * 在该生命周期函数中，data和methods都已经被初始化好了
         */
        created(){
            console.log(this.name)
        },
        /**
         * 3.表示模板已经编译完成，但是还未把模板渲染到页面中
         */
        beforeMount(){
            console.log(document.getElementById("h3").innerText)       //{{name}}
        },
        /**
         * 4.表示内存中的模板已经挂载，渲染到了页面中
         * mounted是创建实例期间的最后一个生命周期函数，当执行完mounted，就表示实例已经被完全创建好了
         */
        mounted(){
            console.log(document.getElementById("h3").innerText)       //hello,vue
        },

        /**
         * 5.当data发生改变的时候,是将数据重新渲染到页面上之前（组件运行阶段的函数）
         * data是最新的，但是页面上的数据是旧的
         */
        beforeUpdate(){
            console.log("页面上显式地内容:" + document.getElementById("h3").innerText)
            console.log("data中最新的数据:" + this.name)
        },
        /**
         * 6.当执行该事件的时候，页面和data的数据都是最新的
         */
        updated(){
            console.log("updated之后，页面上显式地内容:" + document.getElementById("h3").innerText)
            console.log("updated之后，data中最新的数据:" + this.name)
        },
        /**
         * 7.当执行该函数的时候，vue实例已经从运行阶段进入到了销毁阶段，实例身上所有的data和methods，过滤器等，都处于可用状态
         */
        beforeDestroy(){

        },
        /**
         * 8.当执行到该钩子函数的时候，组件已经被完全摧毁，组件中的data，methods和过滤器等都不可用
         */
        destroyed(){

        }
    })
</script>
</html>
















